<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/public/stylesheet/home.css">
</head>

<body>

    <div id="app">
        <!-- 顶部操作按钮 -->
        <div class="home-header">
            <div class="home-header-btn">
                <el-button type="text" @click="gotoShoppingCart">ShoppingCart</el-button>
                <el-button type="text" @click="openChat">Messages</el-button>
                <el-button type="text" @click="gotoMine">Account</el-button>
            </div>
        </div>
        <!-- 聊天弹窗 -->
        <el-dialog :visible.sync="chatVisible" width="800px" class="home-chat-container" :show-close="false" title="Chat">
            <div class="home-chat-list">
                <div class="home-chat-list-item" v-for="chat in chatList.values()" :id="chat.id" @click="selectChat(chat)">
                    <img :src="chat.avatar" alt="">
                    <!-- <img src="/public/assets/img.jpg" alt=""> -->
                    <span>{{ chat.name }}</span>
                </div>
            </div>
            <div class="home-chat-page" :key="refreshKey">
                <div class="chat-lines">
                    <div v-if="selectedChat" class="chat-one-line-container">
                        <div v-for="line in chatHistory.get(selectedChat.id)">
                            <!-- 用户发的消息，靠右 -->
                            <div v-if="line.sendId === userId" class="chat-one-line chat-one-line-user">
                                <span class="chat-line-date">{{ formatDate(line.time) }}</span>
                                <span class="chat-line-content">{{ line.message }}</span>
                                <img :src="userAvatar" alt="U">
                            </div>
                            <!-- 商家发的消息，靠左 -->
                            <div v-else class="chat-one-line chat-one-line-seller">
                                <img :src="chatList.get(line.sendId).avatar" alt="">
                                <span class="chat-line-content">{{ line.message }}</span>
                                <span class="chat-line-date">{{ formatDate(line.time) }}</span>
                            </div>
                        </div>
                    </div>
                    <div v-else>
                        <h2 style="color: #aeaeae; text-align: center;">Select to Chat</h2>
                    </div>
                </div>
                <div v-if="selectedChat" class="chat-send">
                    <el-input placeholder="Input..." v-model="inputMsg" clearable @keyup.enter="sendMessage">
                    </el-input>
                    <el-button type="primary" @click="sendMessage" :disabled="sendBtnDisabled">Send</el-button>
                </div>
            </div>
        </el-dialog>
        <!-- 主内容 -->
        <div class="home-content-container">
            <div class="home-content-search">
                <!-- <span class="home-content-icon"><img src="/public/assets/img.jpg" alt=""
                        style="width: 100px;height: 65px;object-fit: cover;">
                </span> -->
                <el-input placeholder="Search" v-model="searchKey" class="input-with-select">
                    <el-button slot="append" type="primary" @click="searchSubmit">Submit</el-button>
                </el-input>
            </div>
            <!-- 所有商品列表 -->
            <div class="home-content-list-container" v-if="showAllGoods">
                <div class="home-content-list">
                    <div class="home-content-list-item" v-for="item in goods" @click="showDetails(item.id)">
                        <img :src="item.imagePath" alt="" style="height: 75%;width: 100%; object-fit: contain;">
                        <div class="list-item-name">{{ item.name }}</div>
                        <div class="list-item-info">
                            <span class="list-item-info-price">￥{{item.price}}</span>
                            <span class="list-item-info-sold">Sold: {{item.sold}}</span>
                        </div>
                    </div>
                </div>
                <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize"
                    @current-change="handlePageChange">
                </el-pagination>
            </div>
            <!-- 商品详情 -->
            <div class="home-content-details" v-else>
                <div class="details-img">
                    <img :src="selectedGoods.imagePath" alt="" style="width: 500px;height: 650px; object-fit: contain;">
                </div>
                <div class="details-info">
                    <div class="details-name">{{selectedGoods.name}}</div>
                    <div class="details-sold">
                        <span>Sold: {{selectedGoods.sold}}</span>
                        <span>Stock: {{selectedGoods.stock}}</span>
                        <el-button type="text" @click="contactSeller(selectedGoods.sellerId)">Contact the Seller</el-button>
                    </div>
                    <div class="details-price">￥{{selectedGoods.price}}</div>
                    <div class="details-desc">{{selectedGoods.detail}}</div>
                    <div class="details-opts">
                        <el-input-number size="mini" v-model="shopCount" :min="1"
                            :max="selectedGoods.stock"></el-input-number>
                        <span class="details-btn-group">
                            <el-button type="primary" size="mini" @click="buyNow"
                                :disabled="selectedGoods.stock===0">Buy Now</el-button>
                            <el-button type="warning" size="mini" @click="addToCart"
                                :disabled="selectedGoods.stock===0">Add to Cart</el-button>
                            <el-button size="mini" @click="backToList">Back to Home</el-button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- 引入组件库 -->
    <script src="/component/vue.js"></script>
    <script src="/component/axios-0.18.0.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入js文件 -->
    <script type="module" src="/public/javascript/home.js"></script>
</body>

</html>